import { AutoAdaptiveConfig } from './AutoAdaptiveConfig'

const defaultConfig: AutoAdaptiveConfig = {
  designWidth: 1920,
  minWidth: 1440,
  minPx: 1
}

const postcssAutoAdaptive = (options = {}) => {
  const configs: AutoAdaptiveConfig = { ...defaultConfig, ...options }

  return {
    postcssPlugin: 'postcss-auto-adaptive',
    Declaration(decl) {
      //

      if (decl.value.includes('px')) {
        const value = decl.value.split('px')[0]
        if (value > configs.minPx) {
          // 得到设计稿下的百分比，*100得到百分比
          const vwValue = ((100 * value) / configs.designWidth).toFixed(3) + 'vw'
          // 得到最小尺寸下的px *最小尺寸除以设计尺寸
          const minPxValue = ((value * configs.minWidth) / configs.designWidth).toFixed(3) + 'px'

          decl.value = vwValue
        }
      }
    }
  }
}
postcssAutoAdaptive.postcss = true

export default postcssAutoAdaptive

